import React from 'react'
import {Card,Icon,Spin, Alert} from 'antd'
import './ui.less'
export default class Loadings extends React.Component{
    render(){
        const icon = <Icon type="loading" style={{fontSize:24}}></Icon>
        return(
            <div style={{width:"100%"}}>
                <Card title="Spin用法" className="card-wrap">
                    <Spin size="small"/>
                    <Spin style={{margin:'0 20px'}}/>
                    <Spin size="large"/>
                    <Spin indicator={icon} style={{marginLeft:20}} spinning={true}/>
                </Card>
                <Card title="内容遮罩" className="card-wrap">
                    <Alert 
                        message="React"
                        description="欢迎来到软谋教育react学习课程"
                        type="info"
                    />
                    <Alert 
                        message="React"
                        description="注意来到软谋教育react学习课程"
                        type="warning"
                    />
                    <Spin tip="加载中...">
                        <Alert 
                            message="React"
                            description="欢迎来到软谋教育react学习课程"
                            type="info"
                        />
                    </Spin>
                    <Spin tip="加载中..." indicator={icon}>
                        <Alert 
                            message="React"
                            description="欢迎来到软谋教育react学习课程"
                            type="warning"
                        />
                    </Spin>
                </Card>
            </div>
        )
    }
}   